<script>
import axios from "axios";
import { SearchIcon } from 'tdesign-icons-vue-next';

const baseUrl = import.meta.env.VITE_APP_API_BASE_URL
console.log("####" + baseUrl)
export default {

  data() {
    return {
      loading: false,
      title: "Home",
      queryString: "",
      selectedExperience: "",
      selectedDegree: "",
      selectedMajor: "",
      selectedSchool: "",

      schools: [],
      majors: [],
      experiences: [],
      degrees: [],

      adviceList: [],

      total: 0,
      pageSize: 5,
      current: 1,
      pages: 0

    };
  },

  components: {
    SearchIcon
  },


  methods: {
    fetachMapData() {
      //从服务端载入基础数据
      var that = this;
      axios
        .get(baseUrl + "/advice/get/condtionlist")
        .then((response) => {
          // 请求成功时处理响应数据
          //console.log(response.data);
          const result = response.data;
          that.schools = result.data.schools;
          that.majors = result.data.majors;
          that.degrees = result.data.degrees;
          that.experiences = result.data.experiences;

          console.log(result.data.学校);
        })
        .catch((error) => {
          // 请求失败时处理错误
          console.log(error);
        });
    },


    querySugest() {
      this.getTotal();

      this.loading = true
      console.log(
        "query",
        this.queryString,
        this.selectedDegree,
        this.selectedExperience,
        this.selectedMajor,
        this.selectedSchool
      );

      let degree = this.selectedDegree === undefined ? "" : this.selectedDegree
      let school = this.selectedSchool === undefined ? "" : this.selectedSchool
      let major = this.selectedMajor === undefined ? "" : this.selectedMajor
      let experience = this.selectedExperience === undefined ? "" : this.selectedExperience
      axios
        .get(
          baseUrl + "/advice/get/querySugest?queryString=" +
          this.queryString +
          "&degree=" +
          degree +
          "&experience=" +
          experience +
          "&major=" +
          major +
          "&school=" +
          school +
          "&pagesize=" +
          this.pageSize +
          "&pageNum=" +
          this.current
        )
        .then((response) => {
          // 请求成功时处理响应数据
          console.log(response.data);

          this.adviceList = response.data.data

          // this.total = response.data.total
          // this.size = response.data.size
          // this.pages = resonse.data.pages
          // this.current = response.data.current
          this.loading = false

        })
        .catch((error) => {
          // 请求失败时处理错误
          console.log(error);
        });
    },

    getTotal() {
      var that = this
      let degree = this.selectedDegree === undefined ? "" : this.selectedDegree
      let school = this.selectedSchool === undefined ? "" : this.selectedSchool
      let major = this.selectedMajor === undefined ? "" : this.selectedMajor
      let experience = this.selectedExperience === undefined ? "" : this.selectedExperience
      axios
        .get(
          baseUrl + "/advice/get/total?queryString=" +
          this.queryString +
          "&degree=" +
          degree +
          "&experience=" +
          experience +
          "&major=" +
          major +
          "&school=" +
          school
        )
        .then((response) => {
          // 请求成功时处理响应数据
          console.log(response.data);
          that.total = response.data.data[0].total
        })
        .catch((error) => {
          // 请求失败时处理错误
          console.log(error);
        });
    },


    onChange(pageInfo) {
      console.log("onChange(pageInfo:)")
      console.log(pageInfo)

      // let maxpage = parseInt(this.total/pageInfo.pageSize)

      // this.pageSize = pageInfo.pageSize;
      // this.current > maxpage? maxpage :this.current


    },
    onPageSizeChange(size) {
      this.pageSize = size
      let maxpage = parseInt(this.total / this.pageSize)
      console.log("maxpage is:" + maxpage);
      this.current > maxpage ? maxpage : this.current
      this.querySugest()


    },
    onCurrentChange(index, pageInfo) {
      this.pageSize = pageInfo.pageSize;
      this.current = pageInfo.current
      this.querySugest()

      console.log("onCurrentChange(index,pageinfo)")
      console.log(index)
      console.log(pageInfo)
    }

  },



  created() {
    console.log("=======> baseUrl is + " + baseUrl)
    this.fetachMapData();
    this.querySugest();
  },
};
</script>

<template>
  <t-layout>

    <t-space direction="vertical" align="center">
      <div class="text-center text-2xl font-bold">发现各专业前辈们的学习建议</div>

      <t-space>
        <t-input v-model="queryString" size="large" placeholder="请输入查询条件">
          <template #suffixIcon>
            <search-icon :style="{ cursor: 'pointer' }" />
          </template>
        </t-input>
        <t-button size="large" @click="querySugest"> 搜索 </t-button>
      </t-space>

      <t-space>
        <t-select v-model="selectedSchool" clearable>
          <t-option selected value="">所有大学</t-option>
          <t-option v-for="(school, index) in schools" :key="index" :value="school.tagname"
            :label="school.tagname"></t-option>
        </t-select>
        <t-select v-model="selectedMajor" clearable>
          <t-option selected value="">所有专业</t-option>
          <t-option v-for="(major, index) in majors" :key="index" :value="major.tagname"
            :label="major.tagname"></t-option>
        </t-select>
        <t-select v-model="selectedDegree" clearable>
          <t-option selected value="">所有学历</t-option>
          <t-option v-for="(degree, index) in degrees" :key="index" :value="degree.tagname"
            :label="degree.tagname"></t-option>
        </t-select>

        <t-select v-model="selectedExperience" clearable>
          <t-option selected value="">所有工作经验</t-option>
          <t-option v-for="(experience, index) in experiences" :key="index" :value="experience.tagname"
            :label="experience.tagname"></t-option>
        </t-select>
      </t-space>

      <t-sapce  class="rounded-sm hover:bg-gray-50 w-full">
        <t-list :split="true" @load-more="loadMore" size="large">
          <t-loading :loading="loading" text="加载中..." fullscreen />
          <t-list-item v-for="(advice, index) in adviceList" :key="index">
            <t-space direction="vertical">
              <div class="p-5 mb-5 text-sm text-gray-600"> {{ advice.content }}</div>
              <div class="mt-5 px-5 flex flex-row  space-x-2 justify-between">
                <t-tag theme="primary">{{ advice.school }}</t-tag>
                <t-tag theme="primary">{{ advice.major }}</t-tag>
                <t-tag theme="primary">{{ advice.education }}</t-tag>
                <t-tag theme="primary">{{ advice.work_exp }}</t-tag>
              </div>

              <div class="flex flex-row space-x-6 items-center">
                <t-tag>{{ advice.create_time }}</t-tag>
                <t-icon name="thumb-up-1" size="large"></t-icon>
                <t-icon name="chat-bubble" size="large"></t-icon>
              </div>
            </t-space>

          </t-list-item>
        </t-list>
        <t-pagination :total="total" :current="current" v-model:pageSize="pageSize" @change="onChange"
          @page-size-change="onPageSizeChange" @current-change="onCurrentChange" />
      </t-sapce>
    </t-space>

  </t-layout>
</template>
